<!--
* @author wn
* @date 2022/11/01 15:49:15
* @description: 登录页  一级级路由
!-->
<template>
	<el-row>
		<el-col :span="8" :offset="8">
			<el-card shadow="always">
				<h1 style="text-align: center">欢迎登陆</h1>
				<el-divider></el-divider>
				<el-form
					:model="loginData"
					ref="ruleForm"
					:rules="rules"
					status-icon
					size="large"
				>
					<el-form-item label="账号" prop="account">
						<el-input
							type="text"
							placeholder="请输入账户"
							v-model="loginData.account"
							autocomplete="off"
						></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="pass">
						<el-input
							type="password"
							placeholder="请输入密码"
							v-model="loginData.pass"
							show-password
						></el-input>
					</el-form-item>
				</el-form>
				<div class="footer">
					<el-button type="primary" size="large" @click="submitForm">
						提交
					</el-button>
					<el-button size="large" @click="resetForm"> 重置 </el-button>
				</div>
			</el-card>
		</el-col>
	</el-row>
</template>
<script setup>
import { customRules } from '@/utils/el-validate-schema'
import { reactive, ref } from 'vue'
import { doLogin } from '@/network/login'
// import { getAsideList } from '@/network/constants'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex'
import { resetRouter } from '@/router'

const ruleForm = ref('')
const loginData = reactive({
	account: '',
	pass: '',
})
// 自定义校验规则
const rules = customRules(ruleForm, loginData)
// 确认按钮  路由跳转  主页
const router = useRouter()
const store = useStore()
const submitForm = async () => {
	// 校验
	await ruleForm.value.validate(async valid => {
		if (valid) {
			// 清空 数据  确认按钮中  否则地址栏输入 没确认 也会清空数据
			// store.commit('user/clearUser')
			// store.commit('common/clearMenuList')
			// 清空 动态路由 确认按钮中  否则地址栏输入 没确认 也会清空数据
			resetRouter()
			// 登陆 API
			const { result } = await doLogin()
			loginData.account === 'admin'
				? store.commit('user/insertUser', result[1])
				: store.commit('user/insertUser', result[0])
			router.replace('/home')
		} else {
			// fields  只包含未验证 字段
			ElMessage({
				showClose: true,
				message: '请输入正确内容',
				type: 'error',
			})
		}
	})
}
// 取消按钮   确认按钮中
const resetForm = () => ruleForm.value.resetFields()
</script>
<style scoped lang="scss">
.el-row {
	background: url(~@/assets/images/bg.jpeg) no-repeat center / cover;
	.el-col {
		height: 100vh;
		.el-card {
			width: 400px;
			margin: 180px auto;
			border-radius: 15px;
			.footer {
				margin: 30px 0 10px;
				text-align: center;
				> :first-child {
					margin-right: 16px;
				}
			}
		}
	}
}
</style>
